<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions"
                template="/templates/mainLayout.xhtml">
    
    <ui:define name="title">vBox-Home</ui:define>
    <ui:define name="dialog">
        <h:form id="dialogForm">
            <p:dialog widgetVar="removeConfirmDialog" header="Confirmation" showEffect="fade" hideEffect="explode">
                <h:outputText value="Do you want to remove this storage?" /><br/>
                <p:separator/>
                <p:commandButton value="Yes" actionListener="#{dashboardBean.removeAccountAction()}" update=":dashboardForm, :menuForm"
                                 oncomplete="removeConfirmDialog.hide();" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>  
                <p:commandButton value="No" onclick="removeConfirmDialog.hide();" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <h:form id ="menubarForm">
            <p:menubar>
                <p:menuitem value="Register" url="storage/register.jsf" icon="ui-icon-plus" />
                <f:facet name="options">  
                    <p:inputText style="margin-right:10px"/>  
                    <p:button value="Search" icon="ui-icon-search" />  
                </f:facet>
            </p:menubar>
        </h:form>
        
        <h:form id="dashboardForm">
            <p:dataGrid id="accountGrid" var="account" value="#{dashboardBean.accountList}" columns="2" lazy="true">
                <p:panel header="#{account.provider.name}" style="width: 350px; margin-right: 30px; margin-top: 5px;">
                    <p:outputPanel deferred="true">
                        <p:pieChart value="#{dashboardBean.getPieModel(account.about)}" legendPosition="e" fill="false" showDataLabels="true"  
                                    title="#{account.about.name}" style="width:100%;height:250px" sliceMargin="5" diameter="150"
                                    rendered="#{account.about != null}"/>  
                        <h:outputText value="Cannot get information of this storage, please refresh it." rendered="#{account.about == null}"/>
                    </p:outputPanel>
                    <f:facet name="options">
                        <p:menu>  
                            <p:submenu label="Settings">  
                                <p:menuitem value="Refresh" actionListener="#{dashboardBean.reregisterAction(account.provider)}"
                                            icon="ui-icon-refresh" rendered="#{account.about == null}"/>  
                                <p:menuitem value="Delete" actionListener="#{dashboardBean.removeConfirmAction(account.id)}"
                                            icon="ui-icon-trash" onclick="removeConfirmDialog.show();"/>  
                            </p:submenu>  
                        </p:menu>  
                    </f:facet>
                </p:panel>
            </p:dataGrid>
        </h:form>
    </ui:define>
</ui:composition>